<style>
	html,
	body {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	
	#app {
		font-family: Helvetica, sans-serif;
		text-align: center;
	}
	
	.good-lists {
		margin: 0 auto;
		list-style: none;
	}
	
	.good-lists li {
		height: 300px;
		box-sizing: border-box;
		border: 1px solid gainsboro;
		box-shadow: 5px 5px 5px gainsboro;
		float: left;
		margin-bottom: 1.5rem;
		cursor: pointer;
		overflow: hidden;
		border-radius: 10px;
		transition: all 0.2s;
		position: relative;
	}
	
@keyframes icon-bounce {
  0%, 100% {
   transform: rotate(0deg);
  }
  25% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(-15deg);
  }
  75% {
    transform: rotate(5deg);
  }
  85% {
   transform: rotate(-5deg);

  }
}
	.good-lists li:hover{
		 animation: icon-bounce 0.5s alternate;
			
	}
	
	.good-lists li img {
		width: 85%;
		height: 60%;
		border-radius: 5px;
	}
	
	.good-lists li p {
		margin: 0 0 0 5%;
		text-align: left;
		font-size: 0.8rem;
		/*color: #909399;*/
	}
	
  .g-money {
		opacity: 1;
		/*font-size: 1rem;*/
		color: orangered;
	}
	
	.good-lists .g-name {
		text-align: center;
		color:#888;
		padding:8px 0 ;
		margin: 0;
		/*text-shadow: 5px 5px 5px gainsboro;*/
	}
	
	.block .el-pagination {
		white-space: pre-wrap;
	}
	
	.top {
		width: 100%;
		height: 4rem;
		margin: 0;
		line-height: 4rem;
		text-align: left;
		background: #99a9bf;
		color: white;
		text-shadow: 5px 5px 5px silver;
	}
	.bottom{clear: both;}
	.bottom .left{width: 40%;float: left;}
    .bottom .right{width: 50%;float: left; }
	.bottom .left p{text-align: right;}
	#time{ font-size: 1.5rem;color: red; text-align: center;}
</style>

<template>
	<div id="app">
		<el-header class='top'>
			<h1>竞拍空间</h1>
		</el-header>
		<el-main>

			<el-row :gutter="30">
				<ul class="good-lists">

					<el-popover placement="bottom" width="300" trigger="click" v-for="(value,index) in computedPage">
						<p>商品名: <span class="g-name">{{value}}</span></p>
						<p>拍卖价: <span class="g-money">{{ index+100}}元</span></p>
						<el-form label-width="80px" :model="ruleForm" :ref="'ruleForm'+index" :rules="rules">
							<el-form-item label="竞拍价" prop="price">
								<el-input v-model="ruleForm.price"></el-input>
							</el-form-item>
							<el-form-item label="昵称" prop="name">
								<el-input v-model="ruleForm.name"></el-input>
							</el-form-item>
							<el-form-item label="联系电话" prop="tel">
								<el-input v-model="ruleForm.tel"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="submitForm('ruleForm'+index)">竞拍</el-button>
								<el-button @click="resetForm('ruleForm'+index)">重置</el-button>
							</el-form-item>
						</el-form>

						<el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="4" slot="reference">
							<li>
								<p class="g-name">宝剑汉剑八面剑花纹钢长剑阿萨</p>
								<img src="//img.alicdn.com/bao/uploaded/i2/TB1XkV7KFXXXXXxXFXXXXXXXXXX_!!0-item_pic.jpg_240x5000Q50s50.jpg_.webp" />
							<div class="bottom">
								<div class="left">
									<p>市场价: </p>
									<p class="g-money">拍卖价: </p>
									<p>最后出价:</p>
								</div>
								<div class="right">
									<p> 380.00元 {{value}} </p>
									<p class="g-money"> 880.00元 </p>
									<p>忧郁王子</p>
								</div>
								
							</div>
							<p id="time">5:00</p>
							</li>
						</el-col>
					</el-popover>

				</ul>
			</el-row>

			<div class="block">

				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPageNum" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" :background="true">
				</el-pagination>
			</div>

		</el-main>
		<el-footer>

		</el-footer>
	</div>
</template>

<script>
	export default {
		computed: {
			computedPage() {
				return this.goodList.filter((value, index) => {
					return index >= this.pageSize * (this.currentPageNum - 1) && index < this.pageSize * this.currentPageNum
				})
			},
			total() {
				return this.goodList.length;
			}
		},
		data() {
			var validatePrice = (rule, value, callback) => {
				if(!(/^[0-9]*$/.test(value))) {
					callback(new Error('价格格式不正确!!!'));
					return;
				}
				if(value < 123) {
					callback(new Error('输入的价格小于当前竞拍价'));
				}
				callback();
			};
			var validateTel = (rule, value, callback) => {

				if(!(/\b1[3578]\d{9}\b/g.test(value))) {
					callback(new Error('手机号码格式不正确'));
				}
					callback();
			};
			return {
				goodList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40],
				pageSize: 10,
				ruleForm: {
					money: 0,
					name: "",
					tel: ""
				},
				rules: {
					price: [
					{
							required: true,
							message: '请输入竞拍价',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 8,
							message: '长度在 1 到 8个字符',
							trigger: 'blur'
						},
						{
							validator: validatePrice,
							trigger: 'blur'
						},

					],
					name: [
					{
							required: true,
							message: '请输入昵称',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 8,
							message: '长度在 3 到 8个字符',
							trigger: 'blur'
						}
					],
					tel: [
					{
							required: true,
							message: '请输入手机号码',
							trigger: 'blur'
						},
						{
							validator: validateTel,
							trigger: 'blur'
						}
					]
				},
				currentPageNum: 1
			}
		},
		methods: {
			submitForm(formName) {
				console.log(this.$refs[formName][0]);
				this.$refs[formName][0].validate((valid) => {
					console.log(valid);
					if(valid) {
						alert('submit!');
						console.log(' submit!!');
					} else {
						console.log('error submit!!');

					}
				});
			},
			resetForm(formName) {
				this.$refs[formName][0].resetFields();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.currentPageNum = val;
				console.log(`当前页: ${val}`);
			}

		},
		mounted() {

		},
		watch: {
			computedPage() {

			}
		}
	}
</script>